可以在正式上線的網頁中,按 F12 > Lighthouse,讓他對網頁進行效能檢查。檢查結果會有以下分類:
⇒ 在 <NuxtImg>
加上 loading="lazy”
, format="webp"
⇒ 要把字型換成 SVG,請改成mdi-svg,並移除字型 CSS
role="checkbox"
和 aria-checked="true|false"
,才能正確傳達其狀態。<html>
element does not have a [lang]
attribute⇒ CIS 顏色對比調整
⇒ 更新 nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: {
lang: 'zh-Hant' // 👈 這裡指定語言
}
}
})
參考文件:https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=zh-tw
優化後的結果,當然還可以更好,繼續優化!